{% extends "UiManager/base.html" %}
{% block title %}Dashboard{% endblock %}
{% load staticfiles %}
{% block css %}
{% endblock %}
{% block js %}
{#    <script src="{% static 'intest/js/highcharts.js' %}"></script>#}
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/solid-gauge.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script>
        // 公共配置
        Highcharts.setOptions({
            chart: {
                type: 'solidgauge'
            },
            title : {
              text: null
           },
            pane: {
                center: ['50%', '85%'],
                size: '140%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '60%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            tooltip: {
                enabled: false
            },
            credits: {
              enabled: false
            },
            yAxis: {
                stops: [
                    [0.1, '#55BF3B'], // green
                    [0.5, '#DDDF0D'], // yellow
                    [0.9, '#DF5353'] // red
                ],
                lineWidth: 0,
                minorTickInterval: null,
                tickPixelInterval: 400,
                tickWidth: 0,
                title: {
                    y: -70
                },
                labels: {
                    y: 16
                }
            },
            plotOptions: {
                solidgauge: {
                    dataLabels: {
                        y: 5,
                        borderWidth: 0,
                        useHTML: true
                    }
                }
            }
        });
        // 速度仪表
        var chart1 = Highcharts.chart('container-speed', {
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'CPU使用率'
                }
            },
            credits: {
                enabled: true
            },
            series: [{
                name: 'CPU使用率',
                data: [80],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}%</span><br/>'
                },
                tooltip: {
                    valueSuffix: ' %'
                }
            }]
        });
        // 转速仪表
        var chart2 = Highcharts.chart('container-rpm', {
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: '内存使用率'
                }
            },
            series: [{
                name: '内存使用率',
                data: [1],
                dataLabels: {
                    format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}%</span><br/>'
                },
                tooltip: {
                    valueSuffix: ' %'
                }
            }]
        });
        // 定时刷新数据
        setInterval(function () {
            var point,
                newVal,
                inc;
            if (chart1) {
                point = chart1.series[0].points[0];
                inc = Math.round((Math.random() - 0.5) * 100);
                newVal = point.y + inc;
                if (newVal < 0 || newVal > 100) {
                    newVal = point.y - inc;
                }
                point.update(newVal);
            }
            if (chart2) {
                point = chart2.series[0].points[0];
                inc = Math.round((Math.random() - 0.5) * 100);
                newVal = point.y + inc;
                if (newVal < 0 || newVal > 100) {
                    newVal = point.y - inc;
                }
                point.update(newVal);
            }
        }, 2000);
    </script>
    <script language="JavaScript">
        $(document).ready(function() {
           var chart = {
              type: 'column'
           };
           var title = {
              text: '项目概览'
           };
           var xAxis = {
              categories: ['闪电借款','掌e贷款', '掌众财富', '财神管家','现金速递'],
              crosshair: true
           };
           var yAxis = {
              min: 0,
              title: {
                 text: '用例(套件)数量'
              }
           };
           var tooltip = {
              headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                 '<td style="padding:0"><b>{point.y:.1f} 个数</b></td></tr>',
              footerFormat: '</table>',
              shared: true,
              useHTML: true
           };
           var plotOptions = {
              column: {
                 pointPadding: 0.2,
                 borderWidth: 0
              }
           };
           var credits = {
              enabled: false
           };

           var series= [{
                    name: '套件',
                    data: [5,3,4,1,3]
                    },
                    {
                        name: '用例',
                        data: [40,50,30,20,25]
                    },
                    {
                        name: '任务',
                        data: [5,3,4,1,3]
                    }];
           var json = {};
           var dataLabels = true
           json.chart = chart;
           json.title = title;
           json.tooltip = tooltip;
           json.xAxis = xAxis;
           json.yAxis = yAxis;
           json.series = series;
           json.plotOptions = plotOptions;
           json.credits = credits;
           json.dataLabels = dataLabels;
           $('#container').highcharts(json);

        });
        var chart3 = Highcharts.chart('container2', {
            chart: {
                type: 'line'
            },
            title: {
                text: '最近10次运行成功率'
            },
            subtitle: {
                text: '数据来源: Snai UiManager'
            },
            credits: {
              enabled: false
            },
            xAxis: {
                categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
            },
            yAxis: {
                title: {
                    text: '成功率 (%)'
                },
                max: 100
            },
            plotOptions: {
            line: {
            dataLabels: {
                // 开启数据标签
                enabled: true
            },
                // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                enableMouseTracking: true
            }
        },
            series: [{
            name: '借款全流程',
            data: [97.5, 98, 95, 96, 95.4, 89.2, 87.4, 44.5, 33.7, 85.4]
        }, {
            name: '财富全流程',
            data: [39, 42, 57, 85, 99, 85, 77.4, 68.5, 46.3, 97]
            }]
        });
    </script>
{% endblock %}
{% block content %}
    <div class="container-fluid">
	<div class="row">
		<div class="col-md-8">
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="container"></div>
                        </div>
                    </div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <a href="#" class="list-group-item disabled">
                            任务列表
                        </a>
                        <div class="panel panel-body">
                            <a href="/ui/run_log_list?id=86">闪电借款全流程</a>
                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-info" role="progressbar"
                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                    style="width: 40%; border-radius:20px;">
                                <span class="sr-only">40% 完成</span>
                                </div>
                            </div>
                            <a href="/ui/run_log_list?id=86">掌e贷全流程</a>
                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-danger" role="progressbar"
                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                    style="width: 60%; border-radius:20px;">
                                <span class="sr-only">90% 完成</span>
                                </div>
                            </div>
                            <a href="/ui/run_log_list?id=86">掌e贷全流程</a>
                            <div class="progress progress-striped active">
                                <div class="progress-bar progress-bar-info" role="progressbar"
                                    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                    style="width: 90%; border-radius:20px;">
                                <span class="sr-only">90% 完成</span>
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <div id="container2" style="min-width:400px;height:400px"></div>
                    </div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="list-group">
                              <a href="#" class="list-group-item disabled">
                                  版本信息
                              </a>
                              <table class="table table-bordered">
                              <tbody>
                                <tr>
                                  <td>平台名称</td>
                                    <td>Snail UiManager</td>
                                </tr>
                                <tr>
                                  <td>当前版本</td>
                                    <td>v1.0.1 std <a> 更新日志</a></td>
                                </tr>
                                <tr>
                                  <td>基于框架</td>
                                  <td>django2.0</td>
                                </tr>
                                <tr>
                                  <td>底层运行工具</td>
                                  <td>appium</td>
                                </tr>
                                <tr>
                                  <td>主要特色</td>
                                  <td>零门槛 / 响应式 / 清爽 / 极简</td>
                                </tr>
                                <tr>
                                  <td>开发团队</td>
                                  <td>北京研发-自动化测试组</td>
                                </tr>
                              </tbody>
                            </table>
                        </div>
                    </div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <a href="#" class="list-group-item disabled">
                                  平均成功率
                              </a>
                        <div class="panel-body">
                            <div>
                            <a class="disabled" style="color: #666; font-style: normal; font-size: 26px; text-align: left">90%</a>
                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">闪电借款全流程</a>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"
                                aria-valuemin="1" aria-valuemax="100" style="width: 90%; border-radius:20px;">
                                </div>
                            </div>
                            </div>
                            <div>
                            <a class="disabled" style="color: #666; font-style: normal; font-size: 26px; text-align: left">80%</a>
                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">掌e贷全流程</a>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"
                                aria-valuemin="1" aria-valuemax="100" style="width: 80%; border-radius:20px;">
                                </div>
                            </div>
                            </div>
                            <div>
                            <a class="disabled" style="color: #666; font-style: normal; font-size: 26px; text-align: left">78%</a>
                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">掌众财富全流程</a>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"
                                aria-valuemin="1" aria-valuemax="100" style="width: 78%; border-radius:20px;">
                                </div>
                            </div>
                            </div>
                            <div>
                            <a class="disabled" style="color: #666;font-style: normal; font-size: 26px; text-align: left">100%</a>
                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">闪电借款极速</a>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"
                                aria-valuemin="1" aria-valuemax="100" style="width: 100%; border-radius:10px;">
                                </div>
                            </div>
                            </div>
                            <div>
                            <a class="disabled" style="color: #666;font-style: normal; font-size: 26px; text-align: left">88%</a>
                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">掌e贷极速</a>
                            <div class="progress" style="height: 5px">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"
                                aria-valuemin="1" aria-valuemax="100" style="width: 88%; border-radius:10px;">
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <a href="#" class="list-group-item disabled">
                                  实时监控
                              </a>
                        <div class="panel-body">
{#                            <div>#}
{#                            <a class="disabled" style="color: #666; font-style: normal; font-size: 26px; text-align: left">65%</a>#}
{#                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">CPU使用率</a>#}
{#                            <div class="progress" style="height: 5px">#}
{#                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10"#}
{#                                aria-valuemin="1" aria-valuemax="100" style="width: 50%; border-radius:20px;">#}
{#                                </div>#}
{#                            </div>#}
{#                            </div>#}
{#                            <div>#}
{#                            <a class="disabled" style="color: #666;font-style: normal; font-size: 26px; text-align: left">90%</a>#}
{#                            <a class="disabled" style="float: right; font-style: normal; color: #999; font-size: 14px;">内存使用率</a>#}
{#                            <div class="progress" style="height: 5px">#}
{#                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="10"#}
{#                                aria-valuemin="1" aria-valuemax="100" style="width: 90%; border-radius:20px;">#}
{#                                </div>#}
{#                            </div>#}
{#                            </div>#}
                            <div style="width: auto; height: auto; margin: 0 auto">
                                <div id="container-speed" style="width: 280px; height: 200px; float: left"></div>
                                <div id="container-rpm" style="width: 280px; height: 200px; float: left"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<div class="row">
				<div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="list-group">
                              <a href="#" class="list-group-item disabled">
                                本周效果报告
                              </a>
                             <div class="panel panel-body">
                                 <table class="table table-bordered">
                                  <thead>
                                    <tr>
                                      <th>套件</th>
                                      <th>运行次</th>
                                      <th>成功次</th>
                                      <th>成功率</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>借款全流程</td>
                                      <td>50</td>
                                      <td>40</td>
                                      <td>80%</td>
                                    </tr>
                                    <tr>
                                      <td>掌e贷全流程</td>
                                      <td>100</td>
                                      <td>90</td>
                                      <td>90%</td>
                                    </tr>
                                    <tr>
                                      <td>财富全流程</td>
                                      <td>20</td>
                                      <td>10</td>
                                      <td>50%</td>
                                    </tr>
                                  </tbody>
                                </table>
                             </div>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}